<template>
  <div>
    <newHeader/>
    <swiperComponent/>
    <div class="m-content wrapbox clearfix">
      <div class="m-leftbar">

        <!-- s 热门标签 -->
        <div v-bind:class="{ 'm-hotset': true, 'm-hotset-more': tagsIsActive}">
          <h2 class="sider-title">热门标签</h2>
          <div class="box">
            <ul class="clearfix">
              <li v-for="item in categoryCategory">
                <a v-on:click="clickTag(1,item)" v-bind:class="{ 'selectTag': item.code ==category}"> {{ item.name
                  }}</a>
              </li>
            </ul>

            <ul class="clearfix">
              <li v-for="item in categoryCurrency">
                <a v-on:click="clickTag(2,item)" v-bind:class="{ 'selectTag': item.code ==currency}"> {{ item.name
                  }}</a>
              </li>
            </ul>
            <ul class="clearfix">
              <li v-for="item in categoryCountry">
                <a v-on:click="clickTag(3,item)" v-bind:class="{ 'selectTag': item.code ==country}"> {{ item.name }}</a>
              </li>
            </ul>
            <ul class="clearfix">
              <li v-for="item in categoryLanguage">
                <a v-on:click="clickTag(4,item)" v-bind:class="{ 'selectTag': item.code ==language}"> {{ item.name
                  }}</a>
              </li>
            </ul>
          </div>

          <!-- 展开状态添加 class arr-up -->
          <a v-on:click="moreTags" class="arr"><span></span></a>
        </div>
        <!-- e 热门标签 -->

        <!-- s 标题列表 -->
        <div class="m-itemlist">

          <div v-for="item in news" class="m-itembox">
            <a :href="item.newsUrl" class="btnmore">查看全文</a>
            <div class="tit">
              <router-link v-bind="{to:'/newDetail/'+ item.id}">{{item.newsTitle}}</router-link>
            </div>
            <div class="time">{{item.infopubldate}}</div>
            <div class="txt">{{item.newsAbstract}}</div>
            <div class="ft clearfix">
              <div class="tips">
                <i class="s"></i>
                <span :class="'tag'+((index%3)+1)" v-for="(tag,index) in item.tagList">{{tag.name}}</span>
              </div>

              <div class="list">
                <ul>
                  <!-- 展开状态添加 class zan-up -->
                  <!--<li class="zan zan-up">-->
                  <li class="zan " :class="{zan:true,'zan-up':item.likeFlag}">
                    <a @click="isPraise(item)"><i class="s"></i>{{item.likes}}</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                  </li>
                  <li class="share">
                    <a @click="showShare(item)"><i class="s"></i>{{item.shares}}</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <div class="sharebox" v-show="shareId==item.id">
                      <span class="arr"></span>
                      <a href="#"><img src="../images/share-1.png" width="34" height="34"/>复制链接</a>
                      <a href="#"><img src="../images/share-2.png" width="34" height="34"/>复制链接</a>
                      <a href="#"><img src="../images/share-3.png" width="34" height="34"/>复制链接</a>
                      <a href="#"><img src="../images/share-4.png" width="34" height="34"/>复制链接</a>
                      <span class="code"><img src="../images/share-5.png" width="134" height="134"/></span>
                    </div>
                  </li>
                  <li class="comment">
                    <a @click="showComment(item)"><i class="s"></i>{{item.comments}}</a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="m-comment" v-show="item.id==commentID">
              <div class="setmsg">
                <textarea v-model="commentContent" name="" rows="" cols="" placeholder="说点什么..."></textarea>
                <p class="btn">
                  <a @click="addComment(item)">发表评论</a>
                </p>
              </div>
              <div v-for="commentDetail in commentList" class="m-comment-list">
                 <span class="pic">
                   <img v-show="commentDetail.businessData.photo!=null" :src="commentDetail.businessData.photo"
                        width="62" height="62" alt=""/>
                   <img v-show="commentDetail.businessData.photo==null" src="../images/img01.png"
                        width="62" height="62" alt=""/>
                    </span>
                <div class="hd clearfix">
                  <ul class="cxbar">
                    <li><a @click="praiseComment(commentDetail.businessData)"><i class="s"></i>{{commentDetail.businessData.likes}}</a>
                    </li>
                    <li><a @click="replayComment(commentDetail.businessData)">回复</a></li>
                    <li><a @click="report(commentDetail.businessData)">举报</a></li>
                    <li v-show="userId==commentDetail.businessData.userId"><a
                      @click="deleteComment(item,commentDetail,1)">删除</a></li>
                  </ul>
                  <span class="name">{{commentDetail.businessData.nickName}}</span>

                </div>

                <div class="bd">
                  <p class="txt">{{commentDetail.businessData.contentStr}}</p>

                  <div class="leavemsg" v-show="commentDetail.children!==null">
                    <div v-for="subComment in commentDetail.children" class="lmlist">
                      <a class="det" v-show="userId==subComment.businessData.userId"
                         @click="deleteComment(item,subComment,0)"
                      >删除</a>
                      <p>{{subComment.businessData.nickName==null?'未知用户':subComment.businessData.nickName}}：</p>
                      <p>{{subComment.businessData.contentStr}}</p>
                    </div>
                  </div>
                  <!--<div v-show="commentDetail.children!==null "><img style="margin: 0 auto;padding-left: 300px;" src="../images/more.png"/></div>-->
                  <div v-show="replay==commentDetail.businessData.id" class="reply">
                    <textarea v-model="commentContent" rows="" cols=""
                              :placeholder="'回复  '+commentDetail.businessData.nickName==null?'未知用户':commentDetail.businessData.nickName "></textarea>
                    <p class="btn">
                      <a @click="addSubComment(item,commentDetail)">回复</a>
                    </p>
                  </div>
                </div>
              </div>
              <!-- s 点击加载更多-->
              <a @click="moreComment(item)" class="morebtn" v-show="moreComments">
                <span></span>
              </a>
            </div>
          </div>
        </div>

        <vue-paginate-al :nextText="paginate.nextText" :prevText="paginate.prevText" :totalPage="totalPage"
                         :currentPage="currentPage" @btnClick="getNews"></vue-paginate-al>
      </div>
      <div class="m-rightbar">
        <!-- S 侧边栏 -->
        <div class="n-sider">
          <h2 class="sider-title">头条资讯</h2>
          <ul class="n-img-list">
            <li v-for="(item,index) in topLines">
              <router-link v-bind="{to:'/newDetail/'+ item.id}">
                <i>{{index+1}}</i>
                <img :src="item.picUrl"/>
                <h5>{{item.newsTitle}}</h5>
                <p>{{item.newsAbstract}}</p>
              </router-link>
            </li>
          </ul>
          <h2 class="sider-title sider-title2">干货</h2>
          <ul class="n-list">
            <li v-for="item in driedStuff">
              <router-link v-bind="{to:'/newDetail/'+ item.id}">
                <h5>{{item.newsTitle}}</h5>
                <p>{{item.newsAbstract}}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>


    </div>
    <bottom/>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>确认删除评论</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteCoforn">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="举报"
      :visible.sync="reportDialogVisible"
      width="30%">
      <el-select v-model="reprotValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="reportDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="conformReport">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import bottom from '@/components/Bottom'
  import newHeader from '@/components/NewHeader'
  import swiperComponent from '@/components/SSwiper'
  import VuePaginateAl from 'vue-paginate-al'
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        categoryCategory: [],
        categoryCurrency: [],
        categoryCountry: [],
        categoryLanguage: [],
        dialogVisible: false,
        reportDialogVisible: false,
        currency: '',
        category: '',
        reprotValue: 0,
        country: '',
        language: '',
        tagsIsActive: false,
        topLines: [],
        driedStuff: [],
        news: [],
        commentID: 0,
        shareId: 0,
        commentContent: '',
        commentList: [],
        totalPage: 0,
        currentPage: 1,
        currentCommentPage: 1,
        moreComments: false,
        replay: '',
        reportId: '',
        item: null,
        commentDetail: null,
        type: null,
        paginate: {
          nextText: '下一页',
          prevText: '上一页',

        },
        options: [{
          value: 0,
          label: '垃圾营销'
        }, {
          value: 1,
          label: '不实信息'
        }, {
          value: 2,
          label: '有害信息'
        }, {
          value: 3,
          label: '违法信息'
        }, {
          value: 4,
          label: '淫秽色情'
        }, {
          value: 5,
          label: '人身攻击我'
        }, {
          value: 6,
          label: '抄袭我的内容'
        }, {
          value: 7,
          label: '违规有奖活动'
        }],
      }
    }, computed: {
      ...mapGetters({
        userId: 'userId',
      })
    },
    components: {
      bottom,
      newHeader,
      VuePaginateAl,
      swiperComponent,

    },
    mounted() {
      this.getTags()
      this.getTopLine()
      this.getDriedStuffList()
    },

    methods: {
      conformReport() {
        this.$post('/indexNews/newsCommentTips', {
          'commentId': this.reportId,
          'content': this.options[this.reprotValue].label,
          'type': this.reprotValue
        }).then(response => {
          this.$check(response)
          this.$message.success('举报成功');
           this.reportDialogVisible = false

        })
      },
      report(item) {
        this.reportId = item.id
        this.reportDialogVisible = true
        this.reprotValue=0
      },
      praiseComment(item) {
        if (item.likeFlag == null || !item.likeFlag) {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 2,
            'type': 2
          }).then(response => {
            this.$check(response)
            this.$message.success('点赞成功');
            item.likeFlag = true
            item.likes += 1

          })
        } else {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 4,
            'type': 2
          }).then(response => {
            this.$check(response)
            this.$message.success('取消成功');
            item.likeFlag = false
            item.likes -= 1

          })
        }
      },
      isPraise(item) {
        if (item.likeFlag == null || !item.likeFlag) {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 1,
            'type': 1
          }).then(response => {
            this.$check(response)
            this.$message.success('点赞成功');
            // document.querySelector('#like' + item.id).src = require('../assets/img/likes.png')
            // item.src = require('../assets/img/likes.png')
            item.likeFlag = true
            item.likes += 1

          })
        } else {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 3,
            'type': 1
          }).then(response => {
            this.$check(response)
            this.$message.success('取消成功');
            item.likeFlag = false
            item.likes -= 1

          })
        }
      },
      deleteComment(item, commentDetail, type) {
        this.item = item
        this.commentDetail = commentDetail
        this.type = type
        this.dialogVisible = true
      },
      deleteCoforn() {
        this.dialogVisible = false
        this.deleteCommentProcess(this.item, this.commentDetail, this.type)
      },
      deleteCommentProcess(item, commentDetail, type) {
        this.$post('/indexNews/delNewsComment', {
          commentId: commentDetail.id,
          newsType: 0
        }).then(response => {
          this.$check(response)
          this.$message.success('删除评论成功');
          if (type == 1) {
            item.comments -= 1
          }
          this.getComments(item)
        })
      },
      replayComment(item) {
        this.commentContent = ''
        if (this.replay == item.id) {
          this.replay = ''
        } else {

          this.replay = item.id
        }
      },
      // report(item) {
      //   this.commentContent = ''
      //   if (this.replay == item.id) {
      //     this.replay = ''
      //   } else {
      //
      //     this.replay = item.id
      //   }
      // },
      getNews(n) {
        this.currentPage = n
        this.getNewsList()
      },
      getNewsList() {
        this.replay = ''
        this.shareId = 0
        this.commentContent = ''
        let params = {
          'condition': {
            'currency': this.currency,
            'category': this.category,
            'country': this.country,
            'language': this.language
          },
          'current': this.currentPage,
          'pages': this.totalPage,
          'size': 10,
          'total': 0

        }
        this.$post('/indexNews/getNewsList', params).then(response => {
          this.$check(response)
          this.news = response.data.records
          this.currentPage = response.data.current
          this.totalPage = response.data.pages
        })
      },
      addSubComment(item, commentDetail) {
        this.replay = ''
        let params = {
          'newsId': item.id,
          'content': this.commentContent,
          'parentId': commentDetail.id,
          'commentType': 1,
          'newsType': 0
        }
        this.$post('/indexNews/addNewsComment', params).then(response => {
          this.$check(response)
          item.comments += 1
          this.commentContent = ''
          this.getComments(item)
          this.$message.success('添加评论成功');
        })

      },
      addComment(item) {
        this.replay = ''
        let params = {
          'newsId': item.id,
          'content': this.commentContent,
          'parentId': 0,
          'commentType': 1,
          'newsType': 0
        }
        this.$post('/indexNews/addNewsComment', params).then(response => {
          this.$check(response)
          item.comments += 1
          this.commentContent = ''
          this.getComments(item)
          this.$message.success('添加评论成功');
        })

      },
      moreComment(item) {
        this.replay = ''
        this.$post('/indexNews/getNewsCommentList', {
          condition: {
            'newsId': item.id,
            'commentType': item.commentType
          },
          current: this.currentCommentPage + 1,
          size: 5
        }).then(response => {
          this.$check(response)
          if (response.data != null) {
            response.data.records.forEach(function (v) {
              this.commentList.push(v)
            }, this)
            this.currentCommentPage = response.data.current
            if (response.data.current < response.data.pages) {
              this.moreComments = true
            } else {
              this.moreComments = false
            }
          }
        })
      },
      getComments(item) {
        this.commentList = []
        this.currentCommentPage = 1
        this.$post('/indexNews/getNewsCommentList', {
          condition: {
            'newsId': item.id,
            'commentType': item.commentType
          },
          current: this.currentCommentPage,
          size: 5
        }).then(response => {
          this.$check(response)
          if (response.data != null) {
            this.commentList = response.data.records
            this.currentCommentPage = response.data.current
            if (response.data.current < response.data.pages) {
              this.moreComments = true
            }
          }
        })
      }
      ,
      showComment(item) {
        if (this.commentID == item.id) {
          this.commentID = 0
          this.commentList = []
        } else {
          this.commentID = item.id
          this.getComments(item)
        }
      },
      showShare(item) {
        if (this.shareId == item.id) {
          this.shareId = 0
        } else {
          this.shareId = item.id
          item.shares++
        }
      },
      moreTags() {
        this.tagsIsActive = !this.tagsIsActive
      },
      clickTag(type, item) {
        this.currentPage = 1
        switch (type) {
          case 1:
            if (this.category == item.code) {
              this.category = ''
            } else {
              this.category = item.code
            }
            this.getNewsList()
            break;
          case 2:
            if (this.currency == item.code) {
              this.currency = ''
            } else {
              this.currency = item.code
            }
            this.getNewsList()
            break;
          case 3:
            if (this.country == item.code) {
              this.country = ''
            } else {
              this.country = item.code
            }
            this.getNewsList()
            break;
          case 4:
            if (this.language == item.code) {
              this.language = ''
            } else {
              this.language = item.code
            }
            this.getNewsList()
            break;

        }
      },

      getTags() {
        this.$fetch('/indexNews/getBcHotTagList').then(response => {
          this.$check(response)
          let tags = response.data
          if (tags.length != 0) {
            tags.forEach(function (v) {
              if (v.category == 'category') {
                this.categoryCategory.push(v)
              }
              if (v.category == 'currency') {
                this.categoryCurrency.push(v)
              }
              if (v.category == 'country') {
                this.categoryCountry.push(v)
              }
              if (v.category == 'language') {
                this.categoryLanguage.push(v)
              }

            }, this)
            this.getNewsList()
          }
        })
      }, getTopLine() {
        this.$fetch('/indexNews/getHeadlineNewsList').then(response => {
          this.$check(response)
          this.topLines = response.data
        })
      },
      getDriedStuffList() {
        this.$fetch('/indexNews/getDriedStuffList').then(response => {
          this.$check(response)
          this.driedStuff = response.data
        })
      },
    }
  }
</script>

<style scoped>
  .selectTag {
    background: #59B3E2;
    color: #fff;
  }

  .tag1 {
    color: #B795F9;
    /*border-color: #B795F9;*/
    border: #B795F9 1px solid !important;
  }

  .tag2 {
    color: #FF8DA9;
    /*border-color: #FF8DA9;*/
    border: #FF8DA9 1px solid !important;
  }

  .tag3 {
    color: #3F9BFE;
    /*border-color: #3F9BFE;*/
    border: #3F9BFE 1px solid !important;
  }
</style>
